<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .showContainer {
            width: 520px;
            height: 280px;
            margin: 0 auto;
            position: relative;
            border: 1px solid;
            overflow: hidden;
        }

        .container {
            width: 2600px;
            height: 280px;
            position: absolute;
            left: 0;
        }

        .container img {
            float: left;
        }

        .nextorpre {
            width: 520px;
            position: absolute;
            top: 40%;
            font-size: 50px;
            color: red;
            z-index: 10;
        }

        .next {
            float: right;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="showContainer">
        <div class="nextorpre">
            <span class="pre">
                < </span>
                    <span class="next">></span>
        </div>
        <div class="container">
            <img src="./imgs/1t.png" alt="">
            <img src="./imgs/2t.png" alt="">
            <img src="./imgs/3t.png" alt="">
            <img src="./imgs/4t.png" alt="">
            <img src="./imgs/5t.png" alt="">
        </div>
    </div>
    <script>
        // 轮播图的运动 就是 container 容器的运动 ，让container 向左边移动就可以了；

        var containerEle = document.querySelector(".container");
        var showContainerEle = document.querySelector(".showContainer");

        var index = 0;  // 图片所在的位置索引值；
        var timer;
        autoPlay();
        function autoPlay() {
            console.log("autoplay");
            timer = setInterval(function () {
                move(containerEle, "left", -520 * (index + 1), function () {
                    index++;
                    console.log("运动结束", index);

                    if (index == 5) {
                        containerEle.style.left = "0px";
                        index = 0;
                    }
                })
            }, 2000);  // 间隔时间需要大于 动画完成的事件
        }




        // 鼠标移入的时候 轮播图停止运动 ，鼠标移除的时候轮播图又自动开始轮播；
        // enter  、leave  ；  over out ；
        // 鼠标移入
        showContainerEle.onmouseenter = function () {
            // 停止轮播 
            clearInterval(timer);
        }
        // 鼠标移除 
        showContainerEle.onmouseleave = function () {
            // 从新开始轮播
            autoPlay();
        }


        // 实现点击下一页按钮之后切换到下一页 ；
        // 获取下一页按钮
        var nextEle = document.querySelector(".next");
        nextEle.onclick = function () {
            move(containerEle, "left", -520 * (index + 1), function () {
                index++;
                if (index == 5) {
                    containerEle.style.left = "0px";
                    index = 0;
                }
            })
        }







        // 要复制第一张图片 到最后一张图片的后面去；

        function copyImg() {
            // 获取第一个图片 
            var firstItem = containerEle.firstElementChild;
            console.log(firstItem)
            // 给第一个元素复制一份 ；
            var copyFirstItem = firstItem.cloneNode(true);
            containerEle.style.width = "3120px";
            // 把复制的第一张图片添加到最后
            containerEle.appendChild(copyFirstItem);
        }

        copyImg();




        


        function move(boxEle, dir, target, cb) {
            var timer = setInterval(function () {
                // 获取当前box的left值
                var num3 = parseInt(getComputedStyle(boxEle)[dir]);
                // 当前方块所在的位置 和 目标位置比较
                num3 += 5 * (target > num3 ? 1 : -1);
                boxEle.style[dir] = num3 + "px";
                // 假定 运动 500的时候开始向下移动；
                if (num3 == target) {
                    clearInterval(timer);
                    // console.log("停止了");
                    cb();
                }
            }, 5);
        }
    </script>
</body>

</html>